<template>
  <div id="nav">
    <div class="nav-main-menu shadow-2xl">
      <!-- 侧边栏标签页 -->
      <ul>
        <li
          @click="clickNav('example')"
          :class="[navItem == 'example' ? 'isActive' : '']"
        >
          实例中心
        </li>
        <li
          @click="clickNav('api')"
          :class="[navItem == 'api' ? 'isActive' : '']"
        >
          API文档
        </li>
      </ul>
    </div>
    <CesiumDoc v-if="navItem == 'api'"></CesiumDoc>
    <CesiumExample v-else></CesiumExample>
  </div>
</template>
<script setup>
import { ref } from "vue";
import CesiumDoc from "./partial/CesiumDoc.vue";
import CesiumExample from "./partial/CesiumExample.vue";

const navItem = ref("example");
const clickNav = (e) => {
  navItem.value = e;
};
</script>
<style scoped lang="scss">
#nav {
  display: flex;
  height: calc(100vh - 80px);
  width: 100%;
  border: 2px solid lightblue;
  border-top: none;
  .nav-main-menu {
    height: 100%;
    ul {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: 50%;
      padding: 5px;
      font-size: 20px;
      font-family: 900;
      transform: translateY(50%);
      letter-spacing: 3px; /* 增加字符间距 */
      li {
        writing-mode: vertical-rl; /* 垂直方向从右到左 */
        cursor: pointer;
        padding: 10px;
        border-radius: 5px;
      
      }
      .isActive {
          background-color: greenyellow;
          color: white;
        }
      li:hover {
        color: white;
        background-color: greenyellow;
      }
    }
  }
}
</style>
